<template>
	<view>
		<view class="info">
			<image :src="staff.avatar" mode="" class="avatar"></image>
			<view class="name">
				{{staff.name}}
			</view>
		</view>
		<view class="score">
			<view class="server-count">
				<image src="../../../static/service_score.png" mode="" style="width: 44upx;height: 44upx;margin-right: 18upx;"></image>
				<text>已服务{{staff.service_count}}次</text>
			</view>
			<view style="width: 30upx;"></view>
			<view class="score-info">
				<view class="score-number">
					{{staff.service_score}}
				</view>
				<view class="score-detail">
					<view class="score-label">
						服务评价
					</view>
					<view class="score-star">
						<block v-for="i in 5" :key="i">
							<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=staff.service_score-1"></image>
							<image src="../../../static/star-line.png" mode="" style="width: 24upx;height: 24upx;" v-else></image>
						</block>
					</view>
				</view>
			</view>
			
		</view>
		<view class="comment">
			<view class="comment-title">
				用户评价
			</view>
			<view class="comment-list">
				<view class="comment-item" v-for="(comment,key) in staff.comments" :key="key">
					<view style="text-align: right;font-size: 24upx; color: #ABABAB;">{{comment.addtime}}</view>
					<view class="comment-user">
						<image :src="comment.avatar" mode="" class="comment-avatar"></image>
						<view class="comment-userinfo">
							<view class="">
								<text>{{comment.nickname}}</text> 
								<view class="comment-stars">
									<block v-for="i in 5" :key="i">
										<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=comment.service_score-1"></image>
										<image src="../../../static/star-line.png" mode="" style="width: 24upx;height: 24upx;" v-else></image>
									</block>
									
								</view>
								<view class="comment-phone">
									<text>{{comment.phone}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="comment-content">
						{{comment.content}}
					</view>
					
				</view>
				
			</view>
		</view>
		<view style="height: 100upx;"></view>
		<view class="bottom">
			<view class="bottom-btn">
				<button class="bottom-btn share-btn" open-type="share">
					<image class="bottom-icon" src="../../../static/store/share.png"></image>
					<view class="bottom-text">
						分享
					</view>
				</button>
			</view>
			<view class="buy-btn" @click="chooseService">
				立即预约
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-icon.vue'
	export default {
		data() {
			return { 
				staff_id:0,
				shop_id:0,
				staff:{}
			};
		},
		onShareAppMessage:function(res){
			console.log(res);
		},
		onLoad:function(e){
			this.staff_id=e.staff_id;
			this.shop_id=e.shop_id;
			this.getStaffInfo();
		},
		methods:{
			chooseService:function(){
				uni.navigateTo({
					url:"/pages/service/choose/choose?staff_id="+this.staff_id+"&shop_id="+this.shop_id
				})
			},
			getStaffInfo:function(){
				var that=this;
				uni.showLoading({
					title:"加载中"
				})
				that.ajax("/staff/info/",{
					id:this.staff_id,
					shop_id:this.shop_id,
				},function(res){
					that.staff=res.data.data; 
				});
			}
		},
		components: {
			uniIcon
		},
	}
</script>

<style>
	page{
		background: #fdfdfd;
	}
.info{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 80upx;
}
.avatar{
	width: 350upx;
	height: 350upx;
	border-radius: 24upx;
	
}
.name{
	font-size: 30upx;
	margin-top: 30upx;
	color:#0e0e0e;
}
.score{
	background: #ffffff;
	flex: 1;
	display: flex;
	flex-direction: row;
	padding: 0upx 20upx;
	align-content: center;
	align-items: center;
	padding: 20upx 56upx;
}
.score-number{
	font-size: 48upx;
	color:#FF7465;
	margin-right: 16upx;
}
.score-detail{
	display: flex;
	flex-direction: column;
}
.score-label{
	font-size: 28upx;
	color:#4B4B4B;
	line-height: 28upx;
}
.score-star{
	height: 24upx;
	display: flex;
}
.score-info{
	flex: 1;
	box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	border-radius:12upx;
	height: 112upx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding-left: 24upx;
}
.server-count{
	flex: 1;
	display: flex;
	height: 112upx;
	text-align: center;
	font-size: 28upx;
	color:#4B4B4B;
	line-height: 22upx;
	box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	border-radius:12upx;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.comment{
	background: #FFFFFF;
	padding:20upx;
	box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	margin-top: 50upx;
}
.comment-title{
	color: #000000;
	font-size: 30upx;
}
.comment-item{
		padding:20upx 20upx 20upx 30upx;
		box-shadow:0px 2px 20px 0px rgba(43,159,133,0.14);
		border-radius: 12upx;
		margin-top: 24upx;
	}
	.comment-user{
		display: flex;
		flex-direction: row;
	}
	.comment-avatar{
		width: 92upx;
		height: 92upx;
		border-radius: 50%;
	}
	.comment-userinfo{
		margin-left: 22upx;
		font-size: 28upx;
		flex: 1;
		color: #4B4B4B;
	}
	.comment-phone{
		font-size: 24upx;
		color: #8B8B8B;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.comment-stars{
		margin-left: 35upx;
		display: inline-block;
	}
	.comment-score{
		white-space: nowrap;
		display: flex;
		flex-direction: row;
	}
	.comment-content{
		font-size: 28upx;
		margin:15upx 0;
		color: #4B4B4B;
		
	}
	.comment-scores{
		font-size: 25upx;
		margin:40upx 0;
		margin-left: 90upx;
	}
	.comment-image{
		margin-bottom: 10upx;
	}
	.comment-image{
		width: 160upx;
		height: 160upx;
		border-radius: 15upx;
		margin-right: 30upx;
	}
	.comment-time{
		color: #bfbfbf;
		font-size: 20upx;
		margin-top: 10upx;
		text-align: right;
	}
.bottom{
	width: 96%;
	position: fixed;
	bottom: 0;
	display: flex;
	flex-direction: row;
	padding: 10upx 2%;
	border-top: 1upx solid #efefef;
	background: #FFFFFF;
	align-content: center;
	align-items: center;
}
.bottom-btn{
	flex: 1;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
}
.bottom-icon{
	width: 38upx;
	height: 38upx;
	margin-top: 5upx;
	margin-bottom: 10upx;
}
.bottom-text{
	font-size: 22upx;
	color: #272727;
}
.buy-btn{
	width: 590upx;
	color: #ffffff;
	background: #45AA8C;
	text-align: center;
	border-radius: 12upx;
	padding:20upx 0;
	font-size: 32upx;
}
.share-btn{
	background: none;
	border:none;
	margin: 0;
	padding: 0;
	line-height: 1;
}
.share-btn:after{
	border:none;
}
</style>
